<template>
  <div class="form">
    <div class="header">
      <slot name="header"></slot>
    </div>
    <el-form :label-width="labelWidth">
      <el-row>
        <template v-for="item in formItems" :key="item.label">
          <el-col v-bind="colLayout">
            <el-form-item
              v-if="!item.isHide"
              :label="item.label"
              :style="itemStyle"
            >
              <template v-if="item.type === 'input'">
                <el-input
                  :placeholder="item.placeholder"
                  :modelValue="modelValue[item.fileId]"
                  @update:modelValue="emitfileid($event, item.fileId)"
                />
              </template>
              <template v-else-if="item.type === 'select'">
                <el-select
                  :placeholder="item.placeholder"
                  :modelValue="modelValue[item.fileId]"
                  @update:modelValue="emitfileid($event, item.fileId)"
                  style="width: 100%"
                >
                  <el-option
                    v-for="option in item.options"
                    :key="option.label"
                    :label="option.label"
                    :value="option.value"
                  />
                </el-select>
              </template>

              <template v-else-if="item.type === 'radio'">
                <el-radio-group
                  :modelValue="modelValue[item.fileId]"
                  @update:modelValue="emitfileid($event, item.fileId)"
                >
                  <el-radio
                    v-for="option in item.options"
                    :label="option.value"
                    :key="option.label"
                    :size="option.size"
                    :border="option.border"
                  >
                    {{ item.label }}
                  </el-radio>
                </el-radio-group>
              </template>
              <template v-else-if="item.type === 'treeSelect'">
                <el-tree-select
                  :modelValue="modelValue[item.fileId]"
                  @update:modelValue="emitfileid($event, item.fileId)"
                  style="width: 100%"
                  :data="item.options"
                  check-strictly
                  :render-after-expand="false"
                  node-key="id"
                  :props="{
                    label: 'name',
                    children: 'children'
                  }"
                  default-expand-all
                />
              </template>

              <template v-else-if="item.type === 'inputNumber'">
                <el-input
                  :modelValue="modelValue[item.fileId]"
                  @update:modelValue="emitfileid($event, item.fileId)"
                  type="number"
                  :placeholder="item.placeholder"
                  size="large"
                />
              </template>

              <template v-else-if="item.type === 'datepicker'">
                <el-date-picker
                  v-bind="item.otherOptions"
                  :model-value="modelValue[`${item.fileId}`]"
                  @update:modelValue="emitfileid($event, item.fileId)"
                ></el-date-picker>
              </template>

              <template v-else-if="item.type === 'slot'">
                <slot :name="item.slotName"></slot>
              </template>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
    <div class="footer">
      <slot name="footer"> </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
interface IFormProps {
  labelWidth?: string
  modelValue?: any
  formItems?: any[]
  itemStyle?: any
  colLayout?: any
}

const props = withDefaults(defineProps<IFormProps>(), {
  labelWidth: '160px',
  modelValue: () => ({}),
  formItems: () => [],
  itemStyle: () => ({ marginTop: '20px' }),
  colLayout: () => ({
    xl: 6, // ≥1920pxs
    lg: 8, // ≥1200px
    md: 12, // ≥992px
    sm: 24, // ≥768px
    xs: 24 // <768px
  })
})

const emit = defineEmits(['update:modelValue'])
const emitfileid = (e: any, fileId: any) => {
  emit('update:modelValue', { ...props.modelValue, [fileId]: e }) //有重复属性后面覆盖前面
}
</script>

<style lang="less" scoped>
.form {
  .header {
    padding: 10px;
    text-align: center;
  }
  .footer {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
  }
}
</style>
